<template>
    <div>
        <h1>扫描二维码</h1>
        <div>
            <h2>Docker</h2>
            <img :src="dockerQRCode" alt="Docker QR Code" />
        </div>
        <div>
            <h2>K8s</h2>
            <img :src="k8sQRCode" alt="K8s QR Code" />
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import http from '../http'; // 引入全局配置好的 axios 实例

export default {
    setup() {
        // 定义存储二维码图片的变量
        const dockerQRCode = ref('');
        const k8sQRCode = ref('');

        // 定义获取二维码的函数
        const fetchQRCode = async (type) => {
            try {
                // 默认用户 UID 为 1
                const uid = 1;
                // 构造请求 URL，包含 type 和 uid 参数
                const response = await http.get(`qrcode/getQrcode?type=${type}&uid=${uid}`);
                //
                return `data:image/png;base64,${response.qrcode}`;
            } catch (error) {
                console.error('获取二维码失败:', error);
                return '';
            }
        };

        // 在组件挂载时获取二维码
        onMounted(async () => {
            dockerQRCode.value = await fetchQRCode('docker');
            k8sQRCode.value = await fetchQRCode('k8s');
        });

        return {
            dockerQRCode,
            k8sQRCode,
        };
    },
};
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>